<template>
  <div style="width: 100%;height:100%;box-sizing:border-box;user-select: none;
    display: flex;align-items: center;"
    :class="home_bj">

    <div style="width: 100%;height:max-content;display: flex;flex-direction: column;align-items: center;padding-bottom: 25px;">
      <img style="border-radius: 100%;width: 120px"  src="../images/avatar.jpg"/>
      <div style="margin-top: 25px; font-size: 2rem;font-weight: 500;color: #34495e;">xiaopeng - 追风铃的小屋</div>
      <div style="margin-top: 18px; font-size: 1.1rem;font-weight: 300;color: #34495e;">Standing on the shoulders of giants.</div>



      <div style="margin-top: 23px;font-size: 24px;color: #34495e;">分享技术，热爱技术</div>
      <div style="margin-top: 20px;">
        <div class="home_item">指尖有改变世界的力量</div>
        <div class="home_item">开源成就美好</div>
        <div class="home_item">书山有路勤为径</div>
      </div>

      <div style="display: flex;margin-top: 20px;">
<!--        <div class="btn btn_normal max_index" @click="to_page('/蔡晓鹏-Java.pdf', true)">在线简历</div>-->

        <div class="btn btn_main max_index" @click="to_page('/00.myVuepress/设置.html')">
<!--          Get Started →-->
          快速开始 <div class="arrows"> →</div>
        </div>

      </div>

    </div>

    <!-- 气泡特效-->
    <bubbles-effect  :options="bubblesOptions"></bubbles-effect>

  </div>

</template>


<script>
import BubblesEffect from "../bubblesEffect/bubblesEffect.vue";
export default {
    name: "home ",
  components: {BubblesEffect},
  data() {
    return {
      //气泡特效
      bubblesOptions: {
        color: 'rgba(0,127,255,0.2)', //气泡颜色
        radius: 15, //气泡半径
        densety: 0.3, // 气泡密度 越大越密集(建议不要大于1)
        clearOffset: 0.2 // 气泡消失距离[0-1] 越大越晚消失
      },
      //随机背景色
      home_bj: undefined
    }
  },
  methods:{
    to_page(url, isNewPage){
      if (isNewPage){
        window.open(url)
      } else {
        document.location.href = url
      }
    }
  },
    created() {
      var list = ["home_bj_1", "home_bj_2", "home_bj_3", "home_bj_4", "home_bj_5", "home_bj_6", "home_bj_7", "home_bj_8", "home_bj_9", "home_bj_10", "home_bj_11", "home_bj_12"]
      var index = Math.floor(Math.random() * list.length)
      this.home_bj = list[index]
    },
  mounted() {




  }
}
</script>


<style scoped>

  .home_list{

  }
  .home_item{
    font-size: 15px;
    text-align: center;
    color: #34495e;
    margin: 7px 0;
  }


  .btn{
    cursor: pointer;
    border-radius: 500px;
    font-size: 16.8px;
    padding: 0 32px;
    height: 50px;
    display: flex;
    align-items: center;
    user-select: none;

    margin: 0 16px;
    transition: all .15s ease;
  }

  .btn_normal{
    border: 1px solid #42b983;
    color: #42b983;
  }
  .btn_normal:hover{
    color: #34495e;
  }

  .btn_main{
    border: 1px solid #42b983;
    background: #42b983;
    color: #FFF;
    transition: all .15s ease;
  }
  .btn_main:hover{
    background: #65c78d;
    color: #34495e;
  }

  .arrows{
    margin-left: 4px;
    margin-bottom: 1px;
    cursor: pointer;
  }
  .btn_main:hover .arrows{
    margin-left: 6px;
  }

  .home_bj_1{
    background: linear-gradient(to left bottom, hsl(114, 100%, 85%) 0%,hsl(60, 100%, 85%) 100%);;
  }
  .home_bj_2{
    background: linear-gradient(to left bottom, hsl(52, 100%, 85%) 0%,hsl(44, 100%, 85%) 100%);
  }
  .home_bj_3{
    background: linear-gradient(to left bottom, hsl(87, 100%, 85%) 0%,hsl(245, 100%, 85%) 100%);
  }
  .home_bj_4{
    background: linear-gradient(to left bottom, hsl(189, 100%, 85%) 0%,hsl(205, 100%, 85%) 100%);
  }
  .home_bj_5{
    background: linear-gradient(to left bottom, hsl(150, 100%, 85%) 0%,hsl(10, 100%, 85%) 100%);
  }
  .home_bj_6{
    background: linear-gradient(to left bottom, hsl(130, 100%, 85%) 0%,hsl(221, 100%, 85%) 100%);
  }
  .home_bj_7{
    background: linear-gradient(to left bottom, hsl(125, 100%, 85%) 0%,hsl(166, 100%, 85%) 100%);
  }
  .home_bj_8{
    background: linear-gradient(to left bottom, hsl(210, 100%, 85%) 0%,hsl(88, 100%, 85%) 100%);
  }
  .home_bj_9{
    background: linear-gradient(to left bottom, hsl(253, 100%, 85%) 0%,hsl(185, 100%, 85%) 100%);
  }
  .home_bj_10{
    background: linear-gradient(to left bottom, hsl(170, 100%, 85%) 0%,hsl(180, 100%, 85%) 100%);
  }
  .home_bj_11{
    background: linear-gradient(to left bottom, hsl(193, 100%, 85%) 0%,hsl(134, 100%, 85%) 100%);
  }
  .home_bj_12{
    background: linear-gradient(to left bottom, hsl(83, 100%, 85%) 0%,hsl(57, 100%, 85%) 100%);
  }


</style>
